{% extends 'layout.html' %}
{% block title %}换电站照片{% endblock %}
{% block content %}
<div class="row">
    <div class="col" align="center">
        <h2>{{station.station_name}}</h2>
    </div>
</div>
<div class="row">
    {% if current_page %}
    {% for photo in current_page %}
        <div class="col-4">
            <div class="panel panel-primary">
                <div class="panel-heading" align="center">
                    <center class="panel-title">
                        <a href="/ai_inspect/station_channel_photo/{{station.station_id}}/{{photo.channel_name}}/{{photo.photo_time|date:'Y-m-d'}}">
                            {{ photo.channel_name }}
                        </a>
                        <a href="/ai_inspect/station_date_photo/{{station.station_id}}/{{photo.photo_time|date:'Y-m-d'}}">
                            {{ photo.photo_time|date:"Y-m-d H:i:s"}}
                        </a>
                    </center>
                </div>
                <div class="panel-body">
                    <img src="{{ photo.photo_url }}" class="img-fluid" alt="{{ photo.channel_name }}">
                </div>
            </div>
        </div>
    {% endfor %}
    {% else %}
    <div class="col">
        <div class="alert alert-danger" role="alert">换电站未抓拍到照片</div>
    </div>
    {% endif %}
</div>
<!-- 分页控件 -->
{% if paginator.num_pages > 1 %}  <!-- 只有多页时才显示分页 -->
<div class="flex items-center justify-between border-t border-gray-200 px-4 py-3 sm:px-6">
    <!-- 分页信息 -->
    <div class="hidden sm:block">
        <p class="text-sm text-gray-700">
            显示第 <span class="font-medium">{{ current_page.number }}</span> 页，
            共 <span class="font-medium">{{ paginator.num_pages }}</span> 页，
            总计 <span class="font-medium">{{ paginator.count }}</span> 条记录
        </p>
    </div>

    <!-- 页码导航 -->
    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <!-- 上一页 -->
        {% if current_page.has_previous %}
            <a href="?page={{ current_page.previous_page_number }}"
               class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <span class="sr-only">上一页</span>
                <i class="fa fa-chevron-left text-xs"></i>
            </a>
        {% else %}
            <!-- 上一页不可用时禁用 -->
            <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-500 cursor-not-allowed">
                <i class="fa fa-chevron-left text-xs"></i>
            </span>
        {% endif %}

        <!-- 页码列表（只显示当前页附近的页码） -->
        {% for num in current_page.paginator.page_range %}
            {% if current_page.number == num %}
                <!-- 当前页 -->
                <span class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                    {{ num }}
                </span>
            {% elif num > current_page.number|add:'-3' and num < current_page.number|add:'3' %}
                <!-- 显示当前页前后2页 -->
                <a href="?page={{ num }}"
                   class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                    {{ num }}
                </a>
            {% elif num == 1 or num == paginator.num_pages %}
                <!-- 显示第一页和最后一页 -->
                <a href="?page={{ num }}"
                   class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                    {{ num }}
                </a>
            {% elif num == current_page.number|add:'-3' or num == current_page.number|add:'3' %}
                <!-- 显示省略号 -->
                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                    ...
                </span>
            {% endif %}
        {% endfor %}

        <!-- 下一页 -->
        {% if current_page.has_next %}
            <a href="?page={{ current_page.next_page_number }}"
               class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <span class="sr-only">下一页</span>
                <i class="fa fa-chevron-right text-xs"></i>
            </a>
        {% else %}
            <!-- 下一页不可用时禁用 -->
            <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-500 cursor-not-allowed">
                <i class="fa fa-chevron-right text-xs"></i>
            </span>
        {% endif %}
    </nav>
</div>
{% endif %}
{% endblock %}